<template>
<el-card class="box-card">
    <div>
        <div>
            <span>
                <el-row :gutter="20">
                    <el-col :span="3">总金额:{{allcountTotal}}</el-col>
                    <el-col :span="3">总销售奖励:{{cashTotal}} </el-col>
                    <el-col :span="3">总管理津贴:{{manaBounusTotal}}</el-col>
                    <el-col :span="3">总提现金额:{{soldBounusTotal}} </el-col>
                </el-row>

            </span>
        </div>

        <div>
            <el-form label-width="80px">
                <el-form-item label="姓名">
                <el-input style="width:250px" v-model="KeyName" placeholder="姓名查询"></el-input>
                <el-button type="primary" @click="queryByName">查询</el-button>
                <el-button type="primary" @click="resetData">重置</el-button>
            </el-form-item>
            </el-form>
            
        </div>

        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="大客户" name="大客户"></el-tab-pane>
            <el-tab-pane label="合伙人" name="合伙人"></el-tab-pane>
            <el-button type="primary" @click="exportExcel('walletlist')">导出Excel</el-button>
        </el-tabs>

        <el-table ref="walletlistData" :data="walletlistData.slice((currentPage-1)*pagesize,currentPage*pagesize)" style="width: 100%">
            <el-table-column type="index" label="ID" width=""></el-table-column>
            <el-table-column prop="name" label="姓名" width=""></el-table-column>
            <el-table-column prop="phone" label="手机号" width=""></el-table-column>
            <el-table-column prop="province" label="代理区域" width=""></el-table-column>
            <el-table-column prop="" label="代理级别" width="">市</el-table-column>
            <el-table-column prop="manaBounus" label="管理津贴" width=""></el-table-column>
            <el-table-column prop="soldBounus" label="提现金额" width=""></el-table-column>
            <el-table-column prop="cash" label="销售奖励" width=""></el-table-column>
            <el-table-column prop="allcount" label="总金额" width=""></el-table-column>
            <el-table-column prop="" label="操作" width="200px">
                <template slot-scope="scope">
                    <el-button type="primary" size="mini" @click="geWallettInfo(scope.row.name)">钱包明细</el-button>
                    <el-button type="info" plain size="mini">财务打款</el-button>
                    <!-- getWallettInfo(scope.row._id) -->
                </template>
            </el-table-column>
            <!-- <el-table-column prop="_id" label="_id" width=""></el-table-column> -->
        </el-table>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[4,8]"
            :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total='walletlistData.length'>
        </el-pagination>

        <el-dialog
            title="钱包明细"
            :visible.sync="dialogVisible"
            width="90%"
            >
            <div>
                <el-row :gutter="25">
                    <el-col :span="3">总金额</el-col>
                    <el-col :span="6">收支类型： <el-input style="width:150px"></el-input> </el-col>
                    <el-col :span="2">收支日期：</el-col>
                    <el-col :span="8">
                        <div class="block">
                            <el-date-picker
                                
                                type="daterange"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期">
                            </el-date-picker>
                        </div>
                    </el-col>
                </el-row>
                <el-row :gutter="10">
                    <el-col :span="6"><br></el-col>
                </el-row>
                <el-row :gutter="25">
                    <el-col :span="3">支出/收入:</el-col>
                    <el-col :span="2"><el-radio  label="全部"></el-radio></el-col>
                    <el-col :span="4"><el-radio  label="支出(10000元)"></el-radio></el-col>
                    <el-col :span="3"><el-radio  label="收入(0元)"></el-radio></el-col>
                    <el-col :span="2"><el-button type="primary">个人信息</el-button></el-col>
                    <el-col :span="5"><el-button type="primary">导出到Excel</el-button></el-col>
                    <el-col :span="2"><el-button type="primary">重置</el-button></el-col>
                    <el-col :span="2"><el-button type="primary">查询</el-button></el-col>
                </el-row>
                <el-row >
                    <el-table :data="qianbaomingxi" style="width: 100%">
                        <el-table-column type="index" label="ID" width=""></el-table-column>
                        <el-table-column prop="contactsName" label="姓名" width=""></el-table-column>
                        <el-table-column prop="phone" label="电话" width=""></el-table-column>
                        <el-table-column prop="figure" label="金额" width=""></el-table-column>
                        <el-table-column prop="inOrOut" label="收入支出" width="">
                            <template slot-scope="scope">
                                <span v-if="scope.row.inOrOut==1">收入</span>
                                <span v-else>支出</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="inOutInfo" label="收支类型" width=""></el-table-column>
                        <el-table-column prop="inOutDate" label="收支时间" width=""></el-table-column>

                    </el-table>
                </el-row>
            </div>

            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>
        
    </div>
</el-card>
</template>

<script>
import FileSaver from 'file-saver';
import XLSX from 'xlsx';

    export default {
        name:'',
        data(){
            return{
                walletlistData:[],
                activeName: '大客户',
                allcountTotal:0,//总金额
                cashTotal:0,//总销售奖励
                manaBounusTotal:0,//总管理津贴
                soldBounusTotal:0,//总提现金额
                KeyName:'',//查询姓名
                qianbaomingxi:[],//钱包明细
                dialogVisible: false,//钱包明细对话框显示
                currentPage: 1, // 默认开始页面
                pagesize: 4,
                total: 0,
                
            };
        },
        created() {
            this.getKeyAccountData();
        },
        methods: {
            handleSizeChange (size) {
                console.log(`每页 ${size} 条`)
                this.pagesize = size
            },
            handleCurrentChange (currentPage) {
                this.currentPage = currentPage
                console.log(`当前页: ${currentPage}`)
            },
            //获取钱包明细信息
            async geWallettInfo(username){
                // console.log(id)
                this.dialogVisible = true;
                const {data:res} = await this.$axios.post('getWalletInfo',{
                    name:username
                });
                console.log(username);
                var tt=[];
                var Wallet_details = res.data.Wallet_details;
                for(var i = 0 ;i<Wallet_details.length;i++){
                    var temp={};
                    temp.contactsName = res.data.contactsName;
                    temp.phone = res.data.phone;
                    temp.figure = Wallet_details[i].figure;
                    temp.inOrOut = Wallet_details[i].inOrOut;
                    temp.inOutInfo = Wallet_details[i].inOutInfo;
                    temp.inOutDate = Wallet_details[i].inOutDate;
                    tt[i] = temp;
                    // this.qianbaomingxi[i]=temp;
                }
                this.qianbaomingxi = tt;
            },
            //导出Excel
            exportExcel(excelName) {
                //excelName --设置导出的excel名称
                //report-table --对应的要导出的el-table的ref名称
                try {
                    const $e = this.$refs['walletlistData'].$el;
                    // 如果表格加了fixed属性，则导出的文件会生产两份一样的数据，所以可在这里判断一下
                    let $table = $e.querySelector('.el-table__fixed');
                    if (!$table) {
                    $table = $e;
                    }
                    // 为了返回单元格原始字符串，设置{ raw: true }
                    const wb = XLSX.utils.table_to_book($table, { raw: true });
                    const wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' });
                    FileSaver.saveAs(
                        new Blob([wbout], { type: 'application/octet-stream' }),
                        `${excelName}.xlsx`,
                    );
                } catch (e) {
                    if (typeof console !== 'undefined') console.error(e);
                }
            },
            //重置数据
            resetData(){
                this.getKeyAccountData();
                this.activeName='大客户';
                this.KeyName = '';
            },
            //根据姓名查询
            async queryByName(){
                if(this.activeName == '大客户'){
                    const {data:res} = await this.$axios.post('getKeyNameInfo',{
                        name:this.KeyName
                    });
                    this.walletlistData = res.msg;
                }else if(this.activeName == '合伙人'){
                    const {data:res} = await this.$axios.post('getParNameInfo',{
                        name:this.KeyName
                    });
                    this.walletlistData = res.msg;
                }
            },
            //总金额
            getAllCountTotal(){
                var temp = 0;
                for(var index in this.walletlistData){
                    var allcount = this.walletlistData[index].allcount;
                    if(allcount!=null){
                        temp+=allcount;
                    }
                }
                this.allcountTotal = temp;
            },
            //总销售奖励
            getCashTotal(){
                var temp = 0;
                for(var index in this.walletlistData){
                    var cash = this.walletlistData[index].cash;
                    if(cash!=null){
                        temp+=cash;
                    }
                }
                this.cashTotal = temp;
            },
            //总管理津贴
            getManaBounusTotal(){
                var temp = 0;
                for(var index in this.walletlistData){
                    var manaBounus = this.walletlistData[index].manaBounus;
                    if(manaBounus!=null){
                        temp+=manaBounus;
                    }
                }
                this.manaBounusTotal = temp;
            },
            //总提现金额
            getSoldBounusTotal(){
                var temp = 0;
                for(var index in this.walletlistData){
                    var soldBounus = this.walletlistData[index].soldBounus;
                    if(soldBounus!=null){
                        temp+=soldBounus;
                    }
                }
                this.soldBounusTotal = temp;
            },
            //获取“大客户”数据
            async getKeyAccountData(){
                const {data:res} = await this.$axios.get('getAgentSum',{
                    // data:{
                    //     pageNum:1,pageSize:2
                    // }
                });
                this.walletlistData = res.res;
                this.getAllCountTotal();
                this.getCashTotal();
                this.getManaBounusTotal();
                this.getSoldBounusTotal();
            },
            //获取“合伙人”数据
            async getPartnerData(){
                const {data:res} = await this.$axios.get('getPartnerSum');
                this.walletlistData = res.msg;
                this.getAllCountTotal();
                this.getCashTotal();
                this.getManaBounusTotal();
                this.getSoldBounusTotal();
            },
            //选项卡切换调用事件
            handleClick(tab) {
                // console.log(tab.label);
                if(tab.name=='大客户'){
                    this.getKeyAccountData();
                }else if(tab.name=='合伙人'){
                    this.getPartnerData();
                }
            },
            
        },
    }
</script>

<style scoped>

</style>